package myJs.admin.changeEmail

import myJs.CpLayer
import myJs.cps._
import myJs.myPkg.jquery.$
import org.scalajs.dom.html
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.core.facade.React
import slinky.web.html._

import scala.scalajs.js
import scala.scalajs.js.Dynamic.{global => g}
import myJs.Implicits._
import myJs.admin.Admin
import myJs.api.Api
import myJs.myPkg.reactHookForm._
import myJs.myPkg.{NavigateOptions, ReactRouterDOM}
import myJs.tool.Tool
import org.scalajs.dom.window.localStorage
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Pojo

import scala.scalajs.js.{JSON, |}

/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  val curPage = ChangeEmail
  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val useForm = ReactHookForm.useForm(UseFormOptions(mode = "onChange",
      resolver = yupResolver(Schema.schema)
    ))
    val (info, setInfo) = useState("")
    val (password, setPassword) = useState("")
    val (email, setEmail) = useState("")
    val navigate = ReactRouterDOM.useNavigate()

    object FTool {

      def passwordChange = (v: String) => {
        setPassword(v)
      }

      def emailChange = (v: String) => {
        setEmail(v)
      }

      def changeEmail = () => {
        val account = Tool.getAccount
        val request = Pojo.ChangeEmail.Request(password = password, email = email)
        Api.admin.changeEmail(request).map { response =>
          if (response.valid) {
            navigate("/", options = NavigateOptions(state = js.Dictionary("message" -> "邮箱修改成功!",
              "errorClass" -> "text-success")))
          } else {
            setInfo("密码错误！")
          }
        }
        ()
      }

      def formSubmit = useForm.handleSubmit((data: js.Dictionary[js.Any]) => {
        println(JSON.stringify(data))
        FTool.changeEmail()
      })

    }

    CpLayer(title = curPage.titleStr)(
      div(className := "page-content",
        div(className := "page-bar",
          ul(className := "page-breadcrumb",
            li(
              i(className := "fa fa-user"), " ",
              a(href := s"${Admin.detailInfo.absolutePath}", "账户信息"), " ",
              i(className := "fa fa-angle-right"), " ",
            ),
            " ",
            li(
              a(href := s"#", "邮箱修改"),
            ),
          )
        ),

        div(className := "row-fluid",
          div(className := "row",
            div(className := "col-md-12 col-sm-12",
              div(className := "portlet blue-madison box",
                div(className := "portlet-title",
                  div(className := "caption",
                    "邮箱修改"
                  )
                ),
                div(className := "portlet-body",
                  form(className := "form-horizontal", onSubmit := FTool.formSubmit,
                    style := Style(marginTop = "30px"),

                    div(className := "col-sm-offset-2",
                      span(style := Style(lineHeight = "35px"), className := "error", info),
                    ),

                    InputInlinePasswordCp(useForm = useForm, label = "密码", name = "password", inputWidth = 3,
                      value = password, onChange = FTool.passwordChange, placeHolder = "密码",
                      registerOptions = RegisterOptions(
                        required = ValidationValueMessage(value = true, message = "密码不能为空！")
                      )
                    ),

                    InputInlineIconCp(useForm = useForm, label = "新邮箱", name = "email", inputWidth = 3,
                      value = email, onChange = FTool.emailChange, placeHolder = "新邮箱", icon = "envelope",
                    ),


                    div(className := "form-group",
                      div(className := "actions col-sm-offset-2 col-sm-2",
                        button(`type` := "submit", className := "btn btn-primary",
                          style := Style(width = "90%"), "确认修改")
                      )
                    )

                  )
                ),
              ),

            )

          )
        ),
        //							action="@routes.AdminController.changeEmail"

      )
    )

  }


}
